<script setup>
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: '',
  },
  // 是否显示阴影
  shadow: {
    type: Boolean,
    default: true,
  },
  // 边框颜色
  borderColor: {
    type: String,
    default: '#e0e0e0', // 默认边框颜色
  },
  // 背景颜色
  backgroundColor: {
    type: String,
    default: '#ffffff', // 默认背景颜色
  },
  // 内边距
  padding: {
    type: String,
    default: '20px', // 默认内边距
  },
  // 圆角
  borderRadius: {
    type: String,
    default: '8px', // 默认圆角
  },
});
</script>

<template>
  <div
      class="card"
      :style="{
      border: `1px solid ${props.borderColor}`,
      backgroundColor: props.backgroundColor,
      padding: props.padding,
      borderRadius: props.borderRadius,
      boxShadow: props.shadow ? '0 4px 8px rgba(0, 0, 0, 0.1)' : 'none',
    }"
  >
    <!-- 标题 -->
    <div v-if="props.title" class="card-title">
      {{ props.title }}
    </div>

    <!-- 内容 -->
    <div class="card-content">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-content {
  font-size: 14px;
  color: #333;
}
</style>